<template>
	<swiper-item>
		<view class="swiper-item genres" id="content-wrap4" catch-touchmove="handleTouchMove">
			<view class="genresContent">
				<view class="genresBox" v-for="item in 10">
					<view class="mengcheng">

					</view>
					<image class="imageitem" src="../../../../static/image/home/homeSwper.png" mode=""></image>
				</view>
			</view>

		</view>
	</swiper-item>
</template>

<script>
</script>

<style lang="scss" scoped>
	.swiper-item {
		width: 750rpx;
		padding-bottom: 80px;
		.genresContent {
			width: 90%;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.genresBox {
				width: 324rpx;
				height: 236rpx;
				position: relative;
				overflow: hidden;
				margin-top: 20rpx;

				.mengcheng {
					width: 324rpx;
					height: 236rpx;
					position: absolute;
					background-color: rgba(0, 0, 0, 0.6);
					top: 0;
					left: 0;
					z-index: 2;
				}

				.imageitem {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

		}



		.artistsBoxContent {
			width: 500rpx;
			height: 100%;
			position: relative;
			margin-left: 48rpx;

			.title {
				width: 97rpx;
				height: 26rpx;
				line-height: 26rpx;
				color: rgba(193, 192, 192, 1);
				font-size: 22rpx;

			}

			.songs {
				height: 26rpx;
				line-height: 26rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(193, 192, 192, 1);
				margin-top: 20rpx;
			}

			.icons {
				position: absolute;
				right: 20rpx;
				top: 0rpx;
				color: #fff;
				font-size: 40rpx;
			}
		}
	}
</style>